<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	</head>
	<body>
		<i class="fa fa-camera-retro"></i> fa-camera-retro<br />
		<br />
			<hr />
		
		<!--使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。-->

		<i class="fa fa-camera-retro fa-lg"></i> fa-lg
		<i class="fa fa-camera-retro fa-2x"></i> fa-2x
		<i class="fa fa-camera-retro fa-3x"></i> fa-3x
		<i class="fa fa-camera-retro fa-4x"></i> fa-4x
		<i class="fa fa-camera-retro fa-5x"></i> fa-5x   
		<!--如果图标的底部和顶部被截断了，您需要增加行高来解决此问题。-->
		<br />
			<hr />
		
		<div class="list-group">
		  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
		  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
		  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
		  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
		</div>
		
		
		<br />
			<hr />
		<ul class="fa-ul">
		  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
		  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
		  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
		  <li><i class="fa-li fa fa-square"></i>in lists</li>
		</ul>
		
		<br />
			<hr />
		
		<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
			...tomorrow we will run faster, stretch out our arms farther...
			And then one fine morning— So we beat on, boats against the
			current, borne back ceaselessly into the past.
			<br />
			<hr />
			<!--使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。尤其适合 fa-spinner、fa-refresh 和 fa-cog 。-->

						<i class="fa fa-spinner fa-spin"></i>
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                        <i class="fa fa-refresh fa-spin"></i>
                        <i class="fa fa-cog fa-spin"></i>
                        <i class="fa fa-spinner fa-pulse"></i>
                        
                <!--如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。还可以使用 fa-inverse 类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小。-->
                </hr>

			<span class="fa-stack fa-lg">
			  <i class="fa fa-square-o fa-stack-2x"></i>
			  <i class="fa fa-twitter fa-stack-1x"></i>
			</span>
			fa-twitter on fa-square-o<br>
			<span class="fa-stack fa-lg">
			  <i class="fa fa-circle fa-stack-2x"></i>
			  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
			</span>
			fa-flag on fa-circle<br>
			<span class="fa-stack fa-lg">
			  <i class="fa fa-square fa-stack-2x"></i>
			  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
			</span>
			fa-terminal on fa-square<br>
			<span class="fa-stack fa-lg">
			  <i class="fa fa-camera fa-stack-1x"></i>
			  <i class="fa fa-ban fa-stack-2x text-danger"></i>
			</span>
			fa-ban on fa-camera
	</body>
</html>
